import 'package:flutter/material.dart';
import 'package:cook_dinner/config/include.dart';

class CookFood extends StatelessWidget {
  const CookFood({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      padding: EdgeInsets.only(top: 19.rpx, left: 28.rpx, right: 28.rpx),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            '食材',
            style: TextStyle(
              fontSize: 16.rpx,
              color: const Color(0xff333333),
            ),
          ),
          SizedBox(height: 24.rpx),
          Column(
            children: [
              _food(img: 'assets/images/dou02.png', name: '毛豆', ke: '300克'),
              _food(img: 'assets/images/dou01.png', name: '猪肉', ke: '200克'),
              _food(name: '食物名称', ke: '食物数量'),
            ],
          ),
          Center(
            child: InkWell(
              child: Container(
                width: 348.rpx,
                height: 60.rpx,
                margin: EdgeInsets.only(top: 12.rpx),
                alignment: Alignment.center,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(6.rpx),
                  border:
                      Border.all(color: const Color(0xffFCC302), width: 1.rpx),
                ),
                child: Text(
                  '添加食材',
                  style: TextStyle(
                      fontSize: 24.rpx, color: const Color(0xffFCC302)),
                ),
              ),
            ),
          ),
          SizedBox(height: HYSizeFit.screenHeight * 0.32),
          Center(
            child: InkWell(
              child: Container(
                width: 335.rpx,
                height: 48.rpx,
                alignment: Alignment.center,
                margin: EdgeInsets.only(bottom: 48.rpx),
                decoration: BoxDecoration(
                  color: const Color(0xffFCC302),
                  borderRadius: BorderRadius.circular(24.rpx),
                ),
                child: Text(
                  '下一步',
                  style: TextStyle(
                    fontSize: 16.rpx,
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _food({img, name, ke}) {
    return Padding(
      padding: EdgeInsets.only(bottom: 20.rpx),
      child: Row(
        children: [
          img == null
              ? Container(
                  width: 50.rpx,
                  height: 50.rpx,
                  decoration: BoxDecoration(
                    color: const Color(0xffC4C4C4),
                    borderRadius: BorderRadius.circular(6.rpx),
                  ),
                  child: Icon(
                    Icons.add,
                    size: 24.rpx,
                    color: Colors.white,
                  ),
                )
              : Image.asset(
                  img,
                  width: 50.rpx,
                  height: 50.rpx,
                ),
          Container(
            width: 136.rpx,
            height: 50.rpx,
            margin: EdgeInsets.only(left: 12.rpx),
            padding: EdgeInsets.symmetric(horizontal: 17.rpx),
            alignment: Alignment.centerLeft,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(8.rpx),
              color: const Color(0xffF7F7F7),
            ),
            child: Text(
              name,
              style: TextStyle(
                fontSize: 16.rpx,
                color: img == null
                    ? const Color(0xff999999)
                    : const Color(0xff333333),
              ),
            ),
          ),
          Container(
            width: 136.rpx,
            height: 50.rpx,
            margin: EdgeInsets.only(left: 12.rpx),
            padding: EdgeInsets.symmetric(horizontal: 17.rpx),
            alignment: Alignment.centerLeft,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(8.rpx),
              color: const Color(0xffF7F7F7),
            ),
            child: Text(
              ke,
              style: TextStyle(
                fontSize: 16.rpx,
                color: img == null
                    ? const Color(0xff999999)
                    : const Color(0xff333333),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
